<template>
	<view class="content">
		<div class='topBlock'>
			<!-- <view style="height: 1px;width: 100%;"></view> -->
			<!--公告提示 滚动条-->
			<view @click='goToMessage' class="messageBlock"></view>
			<view class="notice-container">
				<i class="horn fa fa-bullhorn"></i>
				<view class="header-notice-marquee" id="notice-marquee">
					<span class="header-marquee-item">{{list_message}}</span>
				</view>
			</view>
			<view class='searchBlock'>
				<input class="uni-input search_input" confirm-type="search" placeholder="请输入卡号/iccid" :value='cardNo' @confirm='confirmTap' @input='getCardNo'	/>
				<div class='searchClear' @click='clearCardNo' v-show='cardNo'>清空</div>
			</view>
		</div>
		<div class="uni-padding-wrap uni-common-mt card-list">
			<view class="card-tab" :style="{'background-color':data.bg}" :animation="data.animationData" v-show="data.show" v-for="(data,index) in dataList" :key="index">
				<view @click="gotoDetail(data)" style="position: relative;">
					<!-- 换卡无法删除 -->
					<div class="card-row-one" :style="{opacity: data.btnOp}">
						<div class="card-operator" v-if='data.dictCardOperatorName'>{{data.dictCardOperatorName}}</div>
						<div class="card-operator" v-else>未知</div>
						<div class="card-number">{{data.cardNumber}}</div>
						<div class="card-status" :style="{'background-color': data.statusBg }">状态: {{data.dictChannelCardStatusName}}</div>
					</div>

					<div class="op-t" :style="{opacity: data.opa}" v-if="data.dictChangeCardFlag!='BECHANGED'">
						<div class="line">
							<div class="ininer-line" :style="{width: data.percentage + '%'}"></div>
						</div>
						<div class="card-row-tow">
							<div class="card-mb">
								<div class="card-four-font">
									总量
								</div>
								<div class="card-four-number">
									{{data.totalMb}}
								</div>
							</div>

							<div class="card-mb ">
								<div class="card-four-font">
									已用
								</div>
								<div class="card-four-number font-blue txt-left">
									{{data.usedFlow}}
								</div>
							</div>
							<div class="card-mb">
								<div class="card-four-font">
									剩余
								</div>
								<div class="card-four-number font-grey">
									{{data.residue}}
								</div>
							</div>
							<div class="card-mb">
								<div class="card-four-font">
									余额
								</div>
								<div class="card-four-number font-blue">
									{{data.balance}}
								</div>
							</div>
						</div>
					</div>
				</view>
				<div class="del-jiao" v-if="data.dictChangeCardFlag!='BECHANGED'"></div>
				<!-- v-if="data.dictChangeCardFlag!='BECHANGED'" 婉姐需求-->
				<i class="ali-icon card-del" @click="delCard(data)" >&#xe62d;</i>

				<div style="height: 93upx;color:#007AFF; font-size:  medium;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-decoration:underline"
				 class="card-row-tow" v-if="data.dictChangeCardFlag=='BECHANGED'" @click="alertNote(data.note)">
					{{data.note!=null&&data.note.length>=20?data.note.substring(0,20)+"...":data.note}}
				</div>

				<div class="card-row-three">
					<div class="three-balance">
						备注:{{data.remark}}
					</div>
					<div class="recharge-button" @click="goToRechargeBalance(data)">
						预存余额
					</div>
				</div>
				<div class="card-row-four" :style="{opacity: data.btnOp}">
					<div class="four-left">
						{{data.expirationDate!=null?data.expirationDate+" 到期":""}}
					</div>
					<div class="four-right" v-if="data.dictChangeCardFlag!='BECHANGED'">
						<div class="four-btn" @click="copy(data)">
							<i class="ali-icon btn-color">&#xe636;</i>
							<div>复制卡号</div>
						</div>
						<div class="four-btn font-blue" @click="goToRechargeSetmeal(data)">
							<i class="ali-icon btn-blue">&#xe665;</i>
							<div>订购套餐</div>
						</div>
						<div class="four-btn font-blue" @click="gotoDetail(data)" style="opacity: 20 !important">
							<i class="ali-icon btn-blue">&#xe769;</i>
							<div>详情</div>
						</div>
					</div>
					<div class="four-right" v-if="data.dictChangeCardFlag=='BECHANGED'">
						<div class="four-btn font-blue" @click="gotoChangeLog(data)" style="opacity: 20 !important">
							<i class="ali-icon btn-blue">&#xe630;</i>
							<div>换卡记录</div>
						</div>
						<div class="four-btn font-blue" @click="gotoChangeCardPage(data)" style="opacity: 20 !important">
							<i class="ali-icon btn-blue">&#xe63d;</i>
							<div>填写地址</div>
						</div>
						<div class="four-btn font-blue" @click="changeNewCard(data)">
							<i class="ali-icon btn-blue">&#xe689;</i>
							<div>填写新卡</div>
						</div>
					</div>
				</div>
				<!-- <div class='card-row-reason'>停机原因：{{data.reason}}</div> -->
			</view>


		</div>
		<div class="add-button">
			<button type="default" style="width:95%;text-align: left;height: 180px !important;line-height: 66px;" @click="gotoAddCard"><i
				 class="ali-icon " style="color: black;margin-right: 10px;font-weight: bold;">&#xe61b;</i> 添加卡</button>
		</div>

		<div class='copy_dialog' v-if='showCopyDialog'>
			<div class='copy_bord'>
				<div class='copy_btn_primary' @click="copyCard(copy_card_id)">复制卡号</div>
				<div class='copy_btn_primary' @click="copyCard(copy_card_iccid)">复制iccid</div>
			</div>
		</div>

		<uni-popup ref="popup" type="bottom" class="bottom-popup">
			<div class="address-card">
				<div class="select-top ">
					<span class="font-1">填写新卡</span>
					<div class="del-jiao" @click="closepop"></div>
					<i class="ali-icon card-del" @click="closepop">&#xe657;</i>
				</div>
				<text style="text-align: left;font-size: 30upx;color:red;">*请输入正确的替换卡，输错5次后将不能再替换新卡</text>
				<input v-model="newOperatorNumber" class="uni-input input-style" focus placeholder="卡号或ICCID" />
				<button type="primary" style="width:87%;" @click="changeCardButton" :disabled="disabled">确定</button>
			</div>
		</uni-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				//卡数据url
				cardDataUrl: 'card-customer/listUserCard',
				cardSingleDataUrl: 'card/getCardData',
				deleteCard: 'card-customer/untyingCard',
				noticeListUrl: 'notice/list',
				changeCardUrl: 'card/changeCard/recheck',
				list: [],
				list_message: '',
				title: 'Hello',
				cardListData: [],
				//激活的bg颜色
				activateBg: '#0ac083',
				deactivateBg: '#ffa648',
				otherStatusBg: '#989898',
				cardNo:'',
				dataList: [],
				loadMoreText: "加载中...",
				showLoadMore: true,
				animationData: null,
				page: {
					size: 10,
					current: 1
				},
				timerList: [],
				operatorNumber: "",
				newOperatorNumber: "",
				disabled: false,
				showCopyDialog: false,
				copy_card_id: '',
				copy_card_iccid: '',
			};
		},
		onLoad() {
			if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
				WeixinJSBridge.invoke('setFontSizeCallback', {
					'fontSize': 0
				});
				// 重写设置网页字体大小的事件
				WeixinJSBridge.on('menu:setfont', function() {
					WeixinJSBridge.invoke('setFontSizeCallback', {
						'fontSize': 0
					});
				});

			};
		},
		onUnload() {
			this.page = {
				size: 10,
				current: 1
			}
			this.dataList = []
			this.showLoadMore = false;
		},
		onReachBottom() {
			this.showLoadMore = true;
			this.page.current++
			setTimeout(() => {
				this.initData();
			}, 300);
		},
		onPullDownRefresh() {
			this.page = {
				size: 10,
				current: 1
			}
			this.dataList = []
			this.initData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {

			this.dataList = []
			this.page = {
				size: 10,
				current: 1
			}
			this.initData();
			//跑马灯数据
			this.$req.crm(this.noticeListUrl, {
				dictNoticeType: "C",
				page: {
					size: 3,
					current: 1
				}
			}).then(v => {
				this.list_message = '';

				this.list = []
				v.data.records.map(t => {
					// this.list.push(t.title)
					this.list_message +=
						'\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
						t.title
				})
			})
		},

		watch: {

		},
		methods: {
			clearCardNo(){
				this.cardNo = "";
				this.page = {
					size: 10,
					current: 1
				}
				this.dataList = []
				this.initData();
			},
			searchCard(){
				this.cardNo = event.target.value;
				this.page = {
					size: 10,
					current: 1
				}
				this.dataList = []
				this.initData();
			},
			getCardNo(){
				this.cardNo = event.target.value
			},
			confirmTap(){
				this.dataList = []
				this.page = {
					size: 10,
					current: 1
				}
				this.initData();
			},	
			initData() {
				setTimeout(() => {
					this.$req.userData(this.cardDataUrl, {
						page: this.page,
						cardNumber: this.cardNo
					}).then(v => {
						this.showLoadMore = false;
						if (v.data&&v.data.records&&v.data.records.length != 0) {
							//讨厌警告给个默认值
							v.data.records.forEach(v => {
								
								//运营商名字
								v.dictCardOperatorName = "--"
								//卡状态
								v.dictChannelCardStatusName = "--"
								//备注
								v.cardUse = "--"
								//余额
								v.balance = "--"
								//剩余百分比
								v.percentage = 0
								//总量
								v.totalMb = "--"
								//已用
								v.usedFlow = "--"
								//剩余
								v.residue = "--"
								v.expirationDate = ""
								v.statusBg = this.otherStatusBg
								v.show = true
								v.opa = 0.1
								v.bg = "rgba(255,255,255,0.5)"
								v.btnOp = 0.1
								v.dictChangeCardFlag = ""
								v.iccid = ""
							})
							this.dataList = this.dataList.concat(v.data.records)
							//异步执行
							/* v.data.records.forEach(value => {
								this.singleCardDetail(value)
							}) */
						} else {
							uni.stopPullDownRefresh();
						}

					})

				}, 300);


			},
			delCard(card) {
				let that = this

				uni.showModal({
					title: '提示',
					content: '确定解绑此卡么',
					success: function(res) {
						if (res.confirm) {
							that.$req.userData(that.deleteCard, {
								cardId: card.cardId,
								cardNumber: card.cardNumber
							}).then(v => {
								//创建动画
								let animation = uni.createAnimation()
								animation.scale(0).step()
								card.animationData = animation.export()
								card.cardNumber = 0
								setTimeout(function() {
									card.show = false
									//that.data=that.data.filter(a=>a.cardId!=card.cardId)
								}, 500)
							})
						} else if (res.cancel) {}
					}
				});
			},
			copy(row) {
				this.showCopyDialog = true;
				this.copy_card_id = row.cardNumber;

				if (row.dictCardOperatorName == '联通') {
					this.copy_card_iccid = row.iccid.substring(0, 19);
				} else {
					this.copy_card_iccid = row.iccid;
				}
			},
			copyCard(message) {
				let that = this;
				this.$copyText(message).then(function(e) {
					that.$message('复制成功')
				}, function(e) {
					that.$message('复制失败')
				})
				this.showCopyDialog = false;
			},
			settime(card, index) {
				let timer = setTimeout(() => {

					if (card.dictChangeCardFlag == null | card.dictChangeCardFlag == 'CHANGE') {
						card.opa = 1
						card.bg = "rgba(255,255,255,1)"
					}
					card.btnOp = 1
				}, 150 * index)
				this.timerList.push(timer)
			},
			goToRechargeBalance(card) {
				if (card.dictChangeCardFlag == null) {
					uni.navigateTo({
						url: '/pages/tabbar/recharge/newBalanceRecharge?cardId=' + card.cardId + "&cardNumber=" + card.cardNumber
					});
				}
			},
			goToRechargeSetmeal(card) {

				let u = ""
				if (card.expirationDate != null) {
					u = "&time=" + card.expirationDate
				}
				let uri = '/pages/tabbar/recharge/createOrder?cardId=' + card.cardId

				let httpsHostUrl = window.location.host + "/" + uri
				if (card.realNameUrl != null) {
					httpsHostUrl = encodeURIComponent(httpsHostUrl)

					let redir = card.realNameUrl + "&_redir=" + window.btoa(httpsHostUrl)
					location.href = redir
				} else {
					uri= '/pages/tabbar/recharge/createOrder?cardId=' + card.cardId + "&cardNumber=" + card.cardNumber +
					u + "&operatorName=" + card.dictCardOperatorName
					uni.navigateTo({
						url: uri
					});
				}

			},
			gotoAddCard() {
				uni.switchTab({
					url: '/pages/tabbar/cardList/addCard'
				});
			},
			gotoDetail(card) {
				if (card.dictChangeCardFlag === 'BECHANGED') {
					console.log('不能跳哦')
				} else {
					let u = ""
					if (card.expirationDate != null) {
						u = "&time=" + card.expirationDate
					}
					let uri = '/pages/cardController/cardController?cardId=' + card.cardId + "&cardNumber=" + card.cardNumber +
						u + "&operatorName=" + card.dictCardOperatorName +
						""
					//let nameHostUrl = window.location.host +"/"+uri

					uni.navigateTo({
						url: uri
					});
				}

			},
			gotoChangeCardPage(card) {
				uni.navigateTo({
					url: '/pages/other/changeCardPage/changeCardPage?cardId=' + card.cardId + "&cardNumber=" + card.cardNumber
				});
			},
			async changeNewCard(card) {
				this.$refs.popup.open()
				this.operatorNumber = card.iccid;
				this.pagekey = await this.$getPageKey();
			},
			async changeCardButton() {
				if (this.newOperatorNumber == '') {
					this.$message('新卡卡号不能为空！')
					return
				}
				this.disabled = true;
				await this.$req.userData(this.changeCardUrl, {
					operatorNumber: this.operatorNumber,
					newOperatorNumber: this.newOperatorNumber,
					pagekey: this.pagekey
				}).then(v => {
					this.$message('更换成功!')
					this.dataList = []
					this.page = {
						size: 10,
						current: 1
					}
					this.initData();
					this.disabled = false;
				}).catch(err => {
					this.disabled = false;
				})
				this.$refs.popup.close();
				this.pagekey = await this.$getPageKey();
			},
			closepop() {
				this.$refs.popup.close()
			},

			singleCardDetail(v) {
				this.$req.userData(this.cardSingleDataUrl, {
					id: v.cardId
				}).then(a => {
					//运营商名字
					v.dictCardOperatorName = a.data.dictCardOperatorName
					//卡状态
					if (a.data.dictChannelCardStatus == 'STATUS_NONE') {
						a.data.dictChannelCardStatusName = "未知"
					}

					v.dictChannelCardStatusName = a.data.dictChannelCardStatusName
					//余额
					v.balance = a.data.balance == null ? 0 : a.data.balance
					//总量
					v.totalMb = a.data.totalMb == null ? '0MB' : this.$toGB.exe(a.data.totalMb)
					//已用
					v.usedFlow = a.data.usedFlow == null ? '0MB' : this.$toGB.exe(a.data.usedFlow)
					//剩余
					v.residue = a.data.residue == null ? '0MB' : this.$toGB.exe(a.data.residue)
					v.expirationDate = a.data.expirationDate
					let percentage = a.data.percentage == null ? 0 : a.data.percentage
					//用1-减去 等于 已用百分比
					v.percentage = 100 - percentage
					if (v.totalMb === '0MB') {
						v.percentage = 0;
					} else {
						//剩余百分比
						let percentage = a.data.percentage == null ? 0 : a.data.percentage
						//用1-减去 等于 已用百分比
						v.percentage = 100 - percentage
					}

					//测试代码
					/* v.totalMb = "9999GB"
					v.usedFlow = "9999GB"
					v.residue = "9999GB"
					v.expirationDate ="2020-3-31" 
					v.percentage = Math.round(Math.random() * 100)
					*/
					v.animationData = ""

					if (a.data.dictChannelCardStatus == 'ACTIVATE') {
						v.statusBg = this.activateBg
					} else if (a.data.dictChannelCardStatus == 'DEACTIVATED') {
						v.statusBg = this.deactivateBg
					} else {
						v.statusBg = this.otherStatusBg
					}
					v.reqFlag = true
					//换卡标识
					v.dictChangeCardFlag = a.data.dictChangeCardFlag
					v.iccid = a.data.iccid
					v.note = a.data.note
					v.realNameUrl = a.data.realNameUrl
					
					this.settime(v, 1)
				})
			},
			gotoChangeLog(item) {
				uni.navigateTo({
					url: '/pages/changeLog/changeLog?cardId='+item.cardId+'&cardNumber='+item.cardNumber
				})
			},
			alertNote(msg) {
				if (msg != null) {
					alert(msg)
				}
			},
			goToMessage() {
				uni.switchTab({
					url: '/pages/message/message'
				})
			}
		}
	};
</script>

<style lang="scss">
	.topBlock{
		width: 100%;
		height: 160upx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 80;
		background-color: rgb(120,168,242);;
	}
	.messageBlock {
		position: absolute;
		width: 100%;
		height: 50upx;
		display: flex;
		align-items: center;
		z-index: 600;
		top: 16upx;
	}

	.notice-container {
		position: fixed;
		width: 100%;
		z-index: 50;
		top: 16upx;
		left: 0;
		padding: 0 10px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-direction: row;
		flex: 1;
		background: rgb(71, 138, 236);
		
		.header-notice-marquee {
			width: 100%;
			height: 50rpx;
			position: relative;
			margin: 0 10px;
			overflow: hidden;
			color: #fff;
			letter-spacing: 1px;
			animation: marquee 20s linear 0s infinite;
			-webkit-animation: marquee 30s linear 0s infinite;
			display: flex;
			align-items: center;

			/*Safari and Chrome*/
			.header-marquee-item {
				width: 100%;
				height: 20rpx;
				position: absolute;
				top: 0;
				left: 0;
				white-space: nowrap;
				display: flex;
				align-items: center;
				font-size: 20rpx;
				margin: 15rpx 0;
			}
		}

		.header-notice-marquee:hover {
			animation-play-state: paused;
		}
	}
	
	.searchBlock{
		width: 100%;
		height: 70upx;
		position: fixed;
		z-index: 100;
		left: 0;
		top: 66upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(120,168,242);
		padding: 10upx 2.5%;		
	}
	.search_input{
		width: 89vw;
		height: 40upx;
		position: absolute;
		left: 2.5vw;
		top: 10upx;
		border-radius: 10upx;
	}
	.searchClear{
		width: auto;
		height: 40upx;
		line-height: 40upx;
		position: absolute;
		top: 25upx;
		right: 8%;
		z-index: 100;
		background: rgba(0,0,0,0.5);
		color: #E4F1FF;
		font-size: 20upx;
		letter-spacing: 2px;
		padding: 0 20upx;
		border-radius: 20upx;
	}
	/* Make it move */
	@keyframes marquee {
		0% {
			text-indent: 27.5em;
		}

		100% {
			text-indent: -105em;
		}
	}

	.text {
		margin: 16rpx 0;
		width: 100%;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #555;
		border-radius: 8rpx;
	}

	.content {
		text-align: center;
		/* height: 400upx; */
		background-color: $theme-color !important;
		min-height: 100vh;
		padding-bottom: 20upx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.add-button {
		width: 100%;
		height: 120upx;
		position: relative;
		margin-top: 170upx;
		padding-bottom: 40upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.card-del {
		font-size: 20rpx;
		color: white;
		position: absolute;
		right: 6rpx;
		top: 8rpx;
	}

	.del-jiao {
		position: absolute;
		right: 3px;
		top: 0px;
		text-align: center;
		color: white;
		width: 0;
		height: 0;
		transform: rotate(90deg);
		border-width: 4vw;
		border-color: #007AFF transparent transparent #007AFF;
		border-style: solid;
		border-top-left-radius: 5px;
		margin-top: -1px;
		right: 0px;
	}

	.card-list {
		position: relative;
		top: 150upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.card-operator {
		width: auto;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 4upx 20rpx;
		letter-spacing: 2upx;
		background-color: #025891;
		color: white;
		border-radius: 30upx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		font-size: 20rpx;
	}

	.card-tab {
		position: relative;
		background-color: rgba(255, 255, 255, 0.5);
		width: 90%;
		height: auto;
		border-radius: 5px;
		margin-top: 25upx;
		padding: 20upx;
		box-shadow: inset 0px -1px 0px 0px $theme-color;
	}

	.op-t {
		opacity: 0.1;
	}

	.card-row-one {
		width: 98%;
		height: 50upx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: small;
		padding-bottom: 20upx;
	}


	.card-number {
		width: 55%;
		display: flex;
		color: $font-bule-color;
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	.card-status {
		width: auto;
		max-width: 280rpx;
		height: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30upx;
		color: white;
		margin-right: 0px;
		padding: 6rpx 16rpx;
		float: right;
		font-size: 20rpx;
	}





	.card-row-tow {
		display: flex;
		justify-content: space-between;
		margin-top: 5px;

		.card-four-number {
			font-size: 35upx;
			text-align: center;
		}

		.card-mb {
			display: flex;
			flex-direction: column;
			max-width: 25%;
		}

		.card-four-font {
			color: $font-grey-color;
			font-size: small;
			text-align: left;
			font-size: 28rpx;
			text-align: center;
		}
	}

	.card-row-three {
		display: flex;
		justify-content: space-between;
		margin: 10rpx;

		.three-balance {
			font-size: 28rpx;
		}

		.recharge-button {
			width: auto;
			height: 34upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30upx;
			background-color: $theme-color;
			color: white;
			font-size: 50%;
			padding: 4upx 16upx;
		}
	}

	.card-row-four {
		position: relative;
		width: 100%;
		height: 80upx;
		display: flex;
		align-items: center;

		.four-left {
			font-size: small;
			position: absolute;
			left: 0px;
			width: 240upx;
			text-align: left;



		}

		.four-right {
			display: flex;
			position: absolute;
			right: 0px;
			font-size: 20upx;

			color: $theme-color;
		}

		.four-btn {
			margin-left: 28px;
			font-size: 28rpx;
		}

		.btn-size {}

		.btn-color {
			color: $theme-color;
			font-size: 40rpx;
		}

		.btn-blue {
			color: #007AFF !important;
			font-size: 40rpx;
		}
	}

	.card-row-five {
		display: flex;
		justify-content: flex-end;
		margin-top: 5px;

		uni-button {

			margin-right: 0px;
			margin-left: 10px;

		}
	}
	.card-row-reason{
		width: 96%;
		height: 20px;
		position: relative;
		border-top: 1px dashed #ebebeb;
		font-size: 12px;
		color: #F49C8A;
		margin-left: 2%;
		margin-top:10px;
		text-align: center;
		padding: 4upx 1%;
		line-height: 20px;
	}
	.card-btn {
		border-radius: 8px;
		height: 35upx;

		color: #646464;
		padding-left: 10px;
		padding-right: 10px;
		font-size: small;
		border: 1px solid $font-grey-color;
	}

	.card-recharge-btn {

		@extend .card-btn;
		border: 1px solid $font-bule-color !important;
		color: $font-bule-color !important;
	}

	.card-detail {
		background-color: #ffa648 !important;
		border: 1px solid #ffa648 !important;
		color: white !important;
	}

	.card-copy {
		background-color: #0ac083 !important;
		border: 1px solid #0ac083 !important;
		color: white !important;
	}

	.card-order {
		background-color: #f04806 !important;
		border: 1px solid #f04806 !important;
		color: white !important;

	}

	.line {
		background-color: #f2f2f2;
		height: 1px;
	}

	.ininer-line {
		background-color: $theme-color;
		position: absolute;
		width: 50%;
		height: 1px
	}

	.address-card {
		background-color: white;
		width: 100%;
		height: 250px;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.input-style {
		border: 1px solid $theme-color;
		width: 80%;
		margin: 10px auto;
		border-radius: 10px;
		height: 13px;
		display: flex;
		align-items: center;
	}

	.select-top {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: $theme-color;
		height: 80upx;
		width: 100%;
		padding-top: 20upx;
		color: white;

		.font-1 {

			margin-left: $left-10;
			font-size: large;
		}

		.font-2 {
			margin-top: 0px;
			font-size: small;
			margin-left: $left-10;
		}
	}

	.copy_dialog {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.6);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.copy_bord {
		width: 80vw;
		height: auto;
		padding: 5vw 1vw;
		background-color: white;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}

	.copy_btn_primary {
		width: 80%;
		height: 60upx;
		font-size: 14px;
		background-image: linear-gradient(to bottom, #7eb2ff, #6d9add);
		color: #fff;
		border-radius: 5px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin: 10px 0;
		line-height: 60upx;
	}
</style>
